<template>
  <div class="calendar">
    <el-calendar v-model="date" ref="calendarRef">
      <template #date-cell="{ data }">
        <div class="calendar__item" v-if="data.type == 'current-month'">
          {{ data.day.slice(8, 10) }}
          <Content :day="data.day"></Content>
        </div>
      </template>
      <template #header="{ date }">
        <div class="calendar__header">
          <el-button size="small" @click="selectDate('prev-month')">
            <icon-material-symbols-arrow-left-alt style="color: #3F8CFF;" />
          </el-button>
          <span>{{ date }}</span>
          <el-button size="small" @click="selectDate('next-month')">
            <icon-material-symbols-arrow-right-alt style="color: #3F8CFF;" />
          </el-button>
        </div>
      </template>
    </el-calendar>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Content from './content.vue'
import type { CalendarDateType, CalendarInstance } from 'element-plus'
const calendarRef = ref<CalendarInstance>()


const date = ref(new Date())

const selectDate = (val: CalendarDateType) => {
  if (!calendarRef.value) return
  calendarRef.value.selectDate(val)
}

</script>

<style lang="scss" scoped>
.calendar {
  border-radius: 10px;
  width: 100%;
  flex: 1;
  background-color: white;

  &__header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
  }

  :deep(.el-calendar) {
    height: 100%;
    display: flex;
    flex-direction: column;

    .el-calendar__body {
      // height: 100%;
      flex: 1;

      .el-calendar-table {
        position: relative;
        height: 100%;

        // .el-calendar-day {
        //   // height: 100%;
        // }

        thead {
          position: absolute;
          top: 0;
          width: 0;
          height: 0;
          transform: scale(0);
          left: 0;

          th {
            width: max-content;
            padding: 10px;
            font-weight: bold;
          }
        }

        tbody {
          height: 100%;

          .prev,
          .next {
            color: white;
            background-color: white;
          }

          .current {
            position: relative;

          }

          .el-calendar-table__row {
            &:nth-of-type(1) {

              td {
                position: relative;
                text-align: right;

                &::after {
                  content: "";
                  position: absolute;
                  left: 4px;
                  top: 4px;
                  font-size: 12px;
                  border-radius: 6px;
                  background-color: rgba($color: #7D8592, $alpha: .5);
                  padding: 4px 8px;
                  color: white;
                }

                &:nth-of-type(1) {
                  &::after {
                    content: "周日";
                  }
                }

                &:nth-of-type(2) {
                  &::after {
                    content: "周一";
                  }
                }

                &:nth-of-type(3) {
                  &::after {
                    content: "周二";
                  }
                }

                &:nth-of-type(4) {
                  &::after {
                    content: "周三";
                  }
                }

                &:nth-of-type(5) {
                  &::after {
                    content: "周四";
                  }
                }

                &:nth-of-type(6) {
                  &::after {
                    content: "周五";
                  }
                }

                &:nth-of-type(7) {
                  &::after {
                    content: "周六";
                  }
                }

              }
            }
          }
        }
      }
    }
  }

  &__item {
    text-align: right;
    // height: 100%;
    display: flex;
    flex-direction: column;

    >:not(:first-of-type) {
      margin-top: -12px;


    }
  }

}
</style>